<template>
  <div class="todo-footer">
    <label>
      <input type="checkbox" v-model="isAllChecked"/>
    </label>
    <span>
          <span>已完成{{selected}}</span> / 全部{{todoList.length}}
        </span>
    <button class="btn btn-danger" @click="deleteSelectedChecked">清除已完成任务</button>
  </div>
</template>

<script>
export default {
  name: "Footer",
  props:['todoList','changeAllTodoChecked','deleteSelectedChecked'],
  data(){
    return{
      isChecked:false,
    }
  },
  computed:{
    //已完成
    selected(){
      return this.todoList.reduce((pre,cur)=>cur.done? pre+1:pre,0)
    },
    //是否全部已完成
    isAllChecked:{
      get(){
        const len = this.todoList.reduce((pre,cur)=>cur.done? pre+1:pre,0)
        if(this.todoList.length!==0 && this.todoList.length===len)return true
        return false
      },
      set(newVal){
        this.changeAllTodoChecked(newVal)
      }
    }
  }
}
</script>

<style scoped>
@import "@/assets/css/Footer.css";
</style>